<template>
	<div class="qdetail">
		<div class="asked_top">
      <div class="img_overall">
        <div class="top_img">
          <img :src="detail.picture" alt="">	
          
          <div :class="['attend', isattend ? 'isattend' : '' ]" @click="attendQues()"></div>
        </div>
        <div class="info">
          <span>{{detail.useramount}}人已测试</span>
          <span class="ques_num">{{detail.commentamount}}人评论</span>
        </div>
      </div>
      <div class="service_info">
        <p>{{detail.question}}</p>
      </div>
		</div>
		<div class="comment" v-if="feedback.length">
			<div class="comment_tit">
        <h5>评价反馈</h5>
      </div>
      <div class="comment_item" v-for="(item,index) in feedback" :key="index">
        <div class="ques_user">
          <div class="photo">
            <img :src="item.userPhoto" alt="">
          </div>	
          <span>{{item.userName}}</span>
        </div>		
        <div class="asked_info">
          <p class="ques_text">{{item.userContent}}</p>
          <div class="dashi_huo">
            <em class="huo"></em>解答大师
          </div>
          <div class="asked_user" @click="lookMaster(item.masterId)">
            <div class="user_info">
              <div class="left_info">
                <div class="photo">
                  <img :src="item.masterPhoto" alt="">
                </div>
              </div>
              <div class="right_info">
                <h5>{{item.masterName}}<span>{{item.grade}}</span></h5>
                <p>{{item.content}}</p>
              </div>
            </div>
            <div class="asked_time">
              <p>{{item.masterReplyTime}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>	
    <div class="relevant_question" v-if="queslist.length">
      <div class="ques_title">
        <span>相关闪问</span>
        <!-- <em @click="moreQueslist()">查看更多></em> -->
      </div>
      <div class="question_list">
        <ques-item v-for="(item,index) in queslist" :key="index" :item="item"></ques-item>
      </div>
    </div>
    <div class="bottom_btn">
      <div class="price">
        <span>￥{{detail.min_price}}</span>
        <p>2小时内回复</p>
      </div>
      <div class="buyed_btn" @click="goaskQues()">立即购买</div>
    </div>		
  </div>
    
</template>
<script>
import quesItem from "@/components/quesItem";

export default {
  components:{
    quesItem,
  },
  data(){
    return{
      isattend:false,
      detail:{},
      queslist:[],
      feedback:[]
    }
  },
  computed: {
    fqId(){
      return this.$route.query.fqId;
    },
    uid() {
      return this.$store.state.userId;
    },
  },
  watch:{
    '$route'(){
      this.getquesDetail();
      this.getfeedBack();
      this.getRelatedQues();
    }
  },
  created(){
    this.getquesDetail();
    this.getattendStatue();
    this.getfeedBack();
    this.getRelatedQues();
  },
  methods:{
    getattendStatue(){
      this.$http.fetchGet("isFavorited",{
        favoriteType:3,
        id: this.fqId,
        userId:this.uid,
      }).then(({data}) => {
        if(data.isFavorited){
          this.isattend = parseInt(data.isFavorited);
        }else{
          this.isattend = 0;
        }
      })
    },
    getquesDetail(){
      this.$http.fetchGet("getFlashquiz", {
        fqId: this.fqId
      }).then(({ data }) => {
        this.detail = data;
      });
    },
    getfeedBack(){
      this.$http.fetchGet("getFlash", {
        feedbackType:2,
        id: this.fqId,
        offset:0,
        limit:2,
      }).then(({ data }) => {
        console.log(data,'feedback');
        this.feedback = data;
      });
    },
    goaskQues(){
      //立即购买，去提问
      this.$router.push({
				path: '/selectmaster',
				query: {
          fqId: this.fqId,
          cid:this.detail.category,
				}
			})
    },
    lookMaster(id){
      this.$router.push({
				path: '/mdetail',
				query: {
					id:id
				}
			})
    },
    getRelatedQues(){
      this.$http.fetchGet("relateFlashquizList",{
        fqId:this.fqId,
        limit:3
      }).then(({ data }) => {
        this.queslist = data;
      });
    },
    isLogin() {
      if(this.uid) {
        return true;
      } else {
        this.$vux.toast.text("请先登录");
        setTimeout(() => {
          this.$router.push({
            path: '/login',
            query: {
              redirect: this.$route.fullPath
            }
          });
        }, 2000)
      }
    },
    attendQues(){
      //关注问题
      if(!this.isLogin())return;
      if(this.isattend){
        this.$http.fetchGet("cancelFavorite",{
          favoriteType:3,
          id:this.fqId,
          userId:this.uid
        }).then(({ data }) => {
          if(data.status == 1){
            this.isattend = false;
          }
        });
      }else{
        this.$http.fetchGet("makefavorite",{
          favoriteType:3,
          id:this.fqId,
          userId:this.uid
        }).then(({ data }) => {
          if(data[0] == "ok"){
            this.isattend = true;
          }
        });
      }
    }
  }
}
</script>

<style scoped lang="less">
	.qdetail{
    height: 100%;
    overflow: auto;
    position: relative;
    margin-bottom: 1.466667rem;
    .img_overall{
      border:1px solid rgba(241,241,241,1);
			border-radius: .133333rem;
			background: rgba(255, 255, 255 ,1);
			margin-bottom: .44rem;
    }
		.asked_top{
			padding: .28rem .266667rem .4rem;
      border-bottom: .266667rem solid #F2F2F2;
      .top_img{
        width: 100%;
        max-height: 3.333333rem;
        position: relative;
        overflow: hidden;

        img{
          width: 100%;
          display: block;
        }
        .attend{
            position: absolute;
            top: 0;
            right: .36rem;
            width: .906667rem;
            height: 1.013333rem;
            background: url("../../assets/question/attend.png") no-repeat center;
            background-size: contain;
            &.isattend{
              background: url("../../assets/question/isattend.png") no-repeat center;
              background-size: contain;
            }
          }
      }
      .info{
        padding: 0 .266667rem;
        height: 1.066667rem;
        line-height: 1.066667rem;
        .flex();
        .justify-content(space-between);
        color: #666;
        font-size: .346667rem;
        .ques_num{
          color: #189BEB;
          em{
            font-style: normal;
            padding-left: .32rem;
          }
        }
      }
		}

    .service_info{
      font-size: .32rem;
      line-height: .48rem;
      color: #333;
    }

    .comment{
      .comment_tit{
        padding-left: .373333rem;
        h5{
          height: 1.04rem;
          line-height: 1.04rem;
          font-size: .346667rem;
          color: #020202;
          font-weight: normal;
          border-bottom:1px solid rgba(242,242,242,1);
        }
      }

      .comment_item{
        border-bottom:.266667rem solid rgba(242,242,242,1);
        padding: .253333rem .266667rem .266667rem .36rem;
        width: 100%;
        box-sizing: border-box;
        .photo{
          width: .746667rem;
          height: .746667rem;
          border-radius: .133333rem;
          overflow: hidden;
          margin-right: .266667rem;
          img{
            width: 100%;
          }
        }
        .ques_user{
          margin-bottom: .4rem;
          .flex();
          .align-items(center);
          font-size: .4rem;
          color: #333;
        }
        .asked_info{
          padding-left: .986667rem;
          p.ques_text{
            padding-bottom: .533333rem;
            margin-bottom: .266667rem;
            border-bottom: 1px solid rgba(242,242,242,1);
            color: #333;
            font-size: .32rem;
            line-height: .4rem;
          }
          .dashi_huo{
            color: #333;
            font-size: .4rem;
            margin-bottom: .373333rem;
            em{
              width: .346667rem;
              height: .413333rem;
              display: inline-block;
              margin-right: .266667rem;
              background: url("../../assets/question/huo.png") no-repeat center;
              background-size: contain;
            }
          }
          .asked_user{
            background:rgba(248,248,248,1);
            border-radius:.133333rem;
            padding: .266667rem;
            box-sizing: border-box;
            .user_info{
              width: 100%;
              .flex();
              div.left_info{
               .photo{
                 width: 1.213333rem;
                 height: 1.213333rem;
                 border-radius: .133333rem;
                 overflow: hidden;
                 img{
                   width: 100%;
                 }
               }
              }
              .right_info{
                padding-left: .24rem;
                h5{
                  font-weight: normal;
                  font-size: .4rem;
                  color: #333;
                  .flex();
                  .align-items(center);
                  span{
                     display: inline-block;
                      font-size: .48rem;
                      color: #fff;
                      background: #FEAD58;
                      width: 1.28rem;
                      text-align: center;
                      line-height: .746667rem;
                      transform-origin: 0 50% ;
                      transform: scale(0.5);
                      -webkit-transform-origin: 0 50%;
                      -webkit-transform: scale(0.5);
                      height: .746667rem;
                      border-radius: .066667rem;
                      margin-left: .146667rem;
                      font-style: normal;
                    // margin-left: .28rem;
                    // width:.64rem;
                    // height:.373333rem;
                    // text-align: center;
                    // line-height: .373333rem;
                    // background:rgba(254,173,88,1);
                    // border-radius:2px;
                    // font-size: .24rem;
                    // color: #fff;
                  }
                }
                p{
                  font-size: .32rem;
                  line-height: 1.5;
                  color:rgba(102,102,102,1);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  overflow:hidden;
                  -webkit-box-orient: vertical;
                }
              }

            }
            .asked_time{
               color:rgba(153,153,153,1);
               font-size: .24rem;
              }
          }
        }
      }
    }

    .relevant_question{
      .ques_title{
        height: 1.24rem;
        line-height: 1.24rem;
        padding-left: .266667rem;
        padding-right: .506667rem;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(242,242,242,1);
        .flex;
        .justify-content(space-between);
        .align-items(center);
        span{
          font-size: .4rem;
          height: .4rem;
          line-height: .4rem;
          color: #333;
          border-left: .053333rem solid #189BEB;
          padding-left: .106667rem;
        }
        em{
          font-size: .293333rem;
          color: #189BEB;
          font-style: normal;
        }
      }
    }
  
    .bottom_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      box-sizing: border-box;
      width: 100%;
      background: #fff;
      border-top: 1px solid rgba(242,242,242,1);
      padding: .133333rem .533333rem .133333rem 0;
      .flex();
      .price{
        width: 3.44rem;
        text-align: center;
        span{
          line-height: .6rem;
          font-size: .48rem;
          color:rgba(231,56,40,1);
        }
        p{
          font-size: .32rem;
          color: #333;
        }
      }
      .buyed_btn{
        width:6.026667rem;
        height:1.173333rem;
        line-height: 1.173333rem;
        text-align: center;
        color: #fff;
        background:rgba(24,155,235,1);
        border-radius:3px;
      }
    }
	}
</style>

